<template>
  <!-- H5扫码弹层 -->
  <el-dialog
    class="gl_dialog_TitleLine"
    width="400px"
    title="扫码进入H5页面"
    :visible.sync="H5DialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    @opened="createCode"
  >
    <div class="outer_code">
      <div id="qrcode" class="qr_code" />
    </div>
  </el-dialog>
</template>

<script>
import QRCode from 'qrcodejs2';
export default {
  props: {
    gameType: {
      required: false,
      type: String,
      default: ''
    },
    gameInfo: {
      required: false,
      type: Object,
      default() {
        return {
          tenantId: '',
          route: ''
        };
      }
    }
  },
  data() {
    return {
      H5DialogVisible: false
    };
  },
  methods: {
    // 生成二维码
    createCode() {
      console.log(`${location.origin}/${this.gameType === 'league' ? 'mbleague' : 'mobile'}.html#/home/${this.gameInfo.route + '_' + (this.gameInfo.tenantId || '')}/info`);
      new QRCode('qrcode', {
        width: 160,
        height: 160,
        text: `${location.origin}/${this.gameType === 'league' ? 'mbleague' : 'mobile'}.html#/home/${this.gameInfo.route + '_' + (this.gameInfo.tenantId || '')}/info`
      });
    }
  }
};
</script>

<style scoped>
.outer_code {
  width: 360px;
  height: 240px;
  position: relative;
}
.outer_code .qr_code {
  width: 160px;
  height: 160px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
